<template>
	<view v-if="twoCategoryList" class="" style="padding-bottom: 10px;">
		<u-collapse-item ref="collapseItem" name="1" class="collapse">
			<view slot="title" class="top_zonghe">
				分类/{{twoCategoryList[0].name}}/{{twoCategoryList[1].name}} {{twoCategoryList.length >= 2 ? '等' : '' }}
			</view>
			<!-- 固定结构 -->
			<view class="show-box" style="display: flex;align-items: center;height: 35px;">
				<!-- 一级分类 -->
				<view class=""
					style="flex:0.8;justify-content: center;display: flex;font-size: 30rpx;align-items: center;color: black;">
					分类
				</view>
				<view class="" style="flex: 3;width: 50%;">
					<v-tabs ref="vTabs" field="name" pillsColor="#fee610" pillsBorderRadius="25rpx" :value="current"
						:tabs="onetabs" :pills="true" line-height="0" activeColor="#000000"
						@change="changeTab"></v-tabs>
				</view>
			</view>

			<view v-for="(item1,index) in twoCategoryList" class="show-box"
				style="display: flex;align-items: center;margin: 8px 0;height: 35px;">
				<!-- 第一个一级分类 -->
				<view class=""
					style="flex:0.8;justify-content: center;display: flex;font-size: 30rpx;align-items: center;color: black;">
					{{item1.name}}
				</view>
				<!-- 第一个一级分类的二级分类 -->
				<view class="" style="flex: 3;width: 50%;">
					<!-- threeTabCurrent[i] -->
					<v-tabs field="name" pillsColor="#fee610" pillsBorderRadius="25rpx" :value="threeTabCurrent[index]"
						:tabs="item1.threeCategoryList" :pills="true" line-height="0" activeColor="#000000"
						@change="threeTabChange">
					</v-tabs>
				</view>
			</view>

			<!-- <view class="show-box" style="display: flex;align-items: center;margin: 8px 0;height: 35px;"> -->
			<!-- 第二个一级分类 -->
			<!-- <view class="" -->
			<!-- style="flex:0.8;justify-content: center;display: flex;font-size: 30rpx;align-items: center;color: black;"> -->
			<!-- 游戏名称 -->
			<!-- </view> -->
			<!-- 第二个一级分类的二级分类 -->
			<!-- <view class="" style="flex: 3;width: 50%;"> -->
			<!-- <v-tabs pillsColor="#fee610" pillsBorderRadius="25rpx" v-model="current" :tabs="tabsB" :pills="true" -->
			<!-- line-height="0" activeColor="#000000" @change=""> -->
			<!-- </v-tabs> -->
			<!-- </view> -->
			<!-- </view> -->

		</u-collapse-item>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				threeTabCurrent: [], //这里一共有row+1个数据
				alltabs: [],
				onetabs: [],
				towAndthreeTabs: [], //数据为一个对象里有一个二级分类，对应多个三级分类
				twoCategoryList: [],

				//已经选中的categoryId
				
				selectCategoryId:{
					masterCategoryId:'',
					selectedCategoryIdList: []//次分类id
				},//主分类id
				
			}
		},
		mounted() {
			this.getAllCategory()
		},
		methods: {
			changeTab(categoryId, index) {
				this.selectMasterCategoryId = categoryId
				
				this.current = index
				//当该变分类tab的时候，需要把切换  子分类数组
				let currenttabs = this.alltabs.filter(item => item.id === categoryId)
				//拿到二级和三级分类
				let row = 0;
				this.twoCategoryList = currenttabs[0].categoryList.map((item) => {
					let threeCategoryList = item.categoryList.map((subItem) => {
						return {
							...subItem,
							row: row
						};
					});
					row++; // 每次处理完一个一级分类，row增加1
					return {
						name: item.name,
						threeCategoryList: threeCategoryList
					};
				});
				setTimeout(() => {
					this.$refs.collapseItem.queryRect()
				}, 0)
			},
			async getAllCategory() {
				let result = await this.$u.api.getCategoryAllTree()
				this.alltabs = result
				//拿到一级分类
				this.onetabs = this.alltabs.map(item => {
					return {
						id: item.id,
						name: item.name,
					}
				})
				this.changeTab(this.onetabs[0].id, 0)
				setTimeout(() => {
					this.$refs.vTabs.getTabItemWidth()

				}, 0)
			},
			//切换三级分类
			threeTabChange(categoryId, index, row) {
				//知道点击的是哪一行,,threeTabCurrent中存储的是每一行选中的数据
				this.$set(this.threeTabCurrent, row, index);
				//把分类id存储在一个数组中
				this.selectedCategoryIdList.push(categoryId)
			}
		}
	}
</script>

<style scoped lang="scss">
	.collapse /deep/ .u-collapse-body {
		margin-left: 20px;
	}

	.top_zonghe {
		font-size: 30rpx;
		font-weight: 1000;
	}

	.center_category_name {
		display: flex;
	}

	.scrollView {
		width: 100%;
		white-space: nowrap;

		.scrollItem {
			display: inline-block;
			width: 9%;
			margin: 3px 20px;
			// p{
			// 	margin-left: 5px;
			// }
		}
	}
</style>